{include file="$header"}
<div id="app" v-cloak>
    <div class="el-warp">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
            <el-form-item label="应用图标：" prop="cover">
                <el-file-select v-model="ruleForm.cover"></el-file-select>
                <p>请<a target="_blank" href="https://www.iconfont.cn/">点击此处</a>选择菜单图标，建议16*16像素PNG格式</p>
            </el-form-item>
            <el-form-item label="应用名称：" prop="title">
                <el-input v-model="ruleForm.title" placeholder="如：测试"></el-input>
            </el-form-item>
            <el-form-item label="应用目录：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="如：ceshi，生成插件应用目录：public/plugins/ceshi"></el-input>
                <p>多个数据表前缀为：mk_app_{{ruleForm.name}}<span v-if="ruleForm.name != ''">_</span><span v-if="ruleForm.name != ''">，单个数据表：mk_app_{{ruleForm.name}}</span></p>
            </el-form-item>
            <el-form-item label="应用数据表：" prop="table">
                <el-checkbox-group v-model="ruleForm.table">
                    <el-checkbox v-for="(item, index) in tablesList" :label="item"></el-checkbox>
                </el-checkbox-group>
                <el-empty v-if="tablesList.length == 0" :description="'在数据库中没有找到表前缀为mk_app_' + ruleForm.name + '_的数据表'"></el-empty>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">立即生成</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tables: {:json_encode($tables)},
                ruleForm: {
                    cover: '',
                    title: '',
                    name: '',
                    table: [],
                },
                rules: {
                    title: [
                        { required: true, message: '请输入插件名称', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '请输入插件目录', trigger: 'blur' },
                    ],
                    table: [
                        { required: true, message: '请选择数据表', trigger: 'blur' },
                    ],
                }
            }
        },
        computed: {
            tablesList() {
                let self = this;
                let list = [];
                self.tables.forEach(function (item, index) {
                    if (item.indexOf('mk_app_' + self.ruleForm.name) != -1) {
                        list.push(item);
                    }
                });
                self.ruleForm.table = [];
                return list;
            }
        },
        methods: {
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        let self = this;
                        request.post('curd/save', self.ruleForm, function(res) {
                            if (res.status === 'success') {
                                self.getMenu();
                            }
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetForm() {
                this.$refs.ruleForm.resetFields();
            },
            getMenu() {
                request.post('curd/index', self.ruleForm, function(res) {
                    if (res.status === 'success') {
                        parent.parentVm.menu = res.data;
                    }
                });
            }
        }
    })
</script>
{include file="$footer"}